<template>
  <el-container class="home-container">
    <!-- 侧边 -->
    <el-aside :class="[collapsedClass]" :style="{ backgroundColor: menu_theme('color') }"> 
      <!-- Logo -->
      <logo :collapse="isCollapse" />
      <el-scrollbar class="scrollbar-handle">
        <!-- 菜单 -->
        <el-menu
            :background-color="menu_theme('color')"
            :text-color="menu_theme('textcolor')"
            :active-text-color="menu_theme('activecolor')"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            router
            :default-active="this.$route.path"
        >
          <!-- 使用自定义组件生成菜单 -->
          <SideMenus
            v-for="(menu, index) in menulist"
            :key="index"
            :item="menu"
          />
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <!-- 头部 -->
      <el-header :style="{ backgroundColor: head_theme('color'), color: head_theme('textcolor') }">
        <div>
          <!-- 菜单收缩按钮 -->
          <div
            :class="isCollapse ? 'toggle-button-collapsed' : 'toggle-button'"
            @click="toggleCollapse"
          >
            <i class="fa fa-align-justify"></i>
          </div>
          <!-- 面包屑 -->
          <BreadCrumb />
        </div>
        <div class="right-menu">
          <!-- 即时通讯 -->
          <!-- <div class="right-menu-item">
            <i class="fa fa-wechat message-icon" title="通讯录" @click.stop="()=>{ mchat_model = !mchat_model; }"></i>
          </div> -->
          <!-- 菜单查询 -->
          <div class="right-menu-item">
            <search id="header-search" />
          </div>
          <!-- 全屏 -->
          <div class="right-menu-item">
            <screenfull id="screenfull" />
          </div>
          <!-- 个人信息 -->
          <div class="right-menu-item">
            <el-dropdown trigger="hover">
              <div class="userinfo-inner" :style="{ color: head_theme('textcolor') }">
                {{ userinfo.realName }}
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="$router.push('/usercenter')">个人设置</el-dropdown-item>
                <el-dropdown-item @click.native="ClearRedis">清空缓存</el-dropdown-item>
                <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- 用户头像 -->
          <div class="right-menu-item">
            <img class="user-header" :src="userinfo.headIcon" :onerror="errorImg"/>
          </div>
          <!-- 主题更换 -->
          <div class="right-menu-item">
            <i class="el-icon-setting theme-change" title="主题更换" @click.stop="()=> { theme_model = !theme_model }"></i>
          </div>
        </div>
      </el-header>
      <!-- 主体 -->
      <el-main>
        <!-- 标签 -->
        <div class="tags">
            <div id="tags-view-container" class="tags-view-container">
              <scroll-pane ref="scrollPane" class="tags-view-wrapper">
                <!-- 固定标签 -->
                <router-link
                  :class="{ active: isActive(fixedTag.path) }"
                  :to="{ path: fixedTag.path }"
                  tag="span"
                  class="tags-view-item"
                  >{{ fixedTag.title }}</router-link
                >
                <!-- 可关闭标签 -->
                <router-link
                  v-for="(tag, index) in tagslist"
                  ref="tag"
                  :key="tag.path"
                  :class="{ active: isActive(tag.path) }"
                  :to="{ path: tag.path, query: tag.query }"
                  tag="span"
                  @click.middle.native="closeTags(index)"
                  class="tags-view-item"
                >
                  {{ tag.title }}
                  <span
                    class="el-icon-close"
                    @click.prevent.stop="closeTags(index)"
                  />
                </router-link>
              </scroll-pane>
            </div>
            <div class="tags-close-box">
              <el-dropdown @command="handleTags">
                <el-button size="mini">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu size="small" slot="dropdown">
                  <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                  <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
        </div>
        <!-- 子路由占位符 -->
        <el-scrollbar class="scrollbar-handle main-Scrollbar" :style="{ height: $store.getters.scrollerHeight() }">
          <loading
              :active.sync="isloading"
              :can-cancel="false"
              :is-full-page="false"
              transition="fade"
              background-color="#fff"
              :opacity="0.5"
              loader="spinner"
              :color="head_theme('color')"
          ></loading>
          <transition name="fade-transform" mode="out-in">
            <!-- <keep-alive> -->
              <router-view :key="$route.path"></router-view>
            <!-- </keep-alive> -->
          </transition>
        </el-scrollbar>
      </el-main>
    </el-container>
    <!-- 返回顶部 -->
    <el-backtop target=".main-Scrollbar .el-scrollbar__wrap" :bottom="50">
      <div
          style="
             {
              height: 100%;
              width: 100%;
              background-color: #f2f5f6;
              box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
              text-align: center;
              line-height: 40px;
              color: #1989fa;
            }
          "
      >
        UP
      </div>
    </el-backtop>
    <!-- 主题颜色更换 -->
    <ThemeSelect v-model="theme_model"/>
    <!-- 即时通讯 -->
    <!-- <Msgcenter v-model="mchat_model"/> -->
  </el-container>
</template>

<script>
import { mapGetters } from "vuex";
import { Utility } from "@/api"; //登录资源
import Search from '@/components/HeaderSearch'
import Logo from '@/components/Logo'
import SideMenus from "@/components/SideMenus";
import ScrollPane from "@/components/ScrollPane";
import BreadCrumb from "@/components/BreadCrumb";
import Screenfull from '@/components/Screenfull';
import Msgcenter from '@/components/MsgCenter';
import ThemeSelect from '@/components/ThemeSelect';
import Loading from "vue-loading-overlay"; // Import component
import "vue-loading-overlay/dist/vue-loading.css"; // Import stylesheet
export default {
  components: { Search, Logo, SideMenus, ScrollPane, BreadCrumb, Screenfull, Msgcenter, ThemeSelect, Loading },
  computed: {
    ...mapGetters(["userinfo", "menulist", "tagslist", "head_theme", "menu_theme", "isloading"]),
  },
  data() {
    return {
      //错误显示头像
      errorImg: 'this.src="' + require("@/assets/images/default-avatar.png") + '"',
      //是否PC端登录
      ispc: false,
      //侧边栏折叠样式
      collapsedClass: "menu-expanded",
      //菜单是否折叠
      isCollapse: false,
      //固定标签
      fixedTag: { path: "/desktop", title: "首页" },
      //主题更换显示
      theme_model: false,
      //通讯窗口显示
      mchat_model: false
    };
  },
  created() {
    //执行定时刷新Token
    this.refreshToken();
  },
  mounted() {
    this.$nextTick(() => {
      this.$store.commit("SET_SCROLLERHEIGHT", (window.innerHeight - 85) + 'px');
      // 监听窗口大小变化
      window.onresize = () => {
        this.$store.commit("SET_SCROLLERHEIGHT", (window.innerHeight - 85) + 'px');
        //侧边栏是否展开
        this.ispc = window.screen.width > 680;
        if (this.ispc) {
          this.collapsedClass = "menu-expanded";
          this.isCollapse = false;
        } else {
          this.collapsedClass = "menu-collapsed";
          this.isCollapse = true;
        }
      };
    });
  },
  methods: {
    //退出登录
    logout() {
      this.$confirm("确认退出吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch('Logout');
        })
        .catch(() => {
          this.$message.info("已取消操作");
        });
    },
    //清空缓存（服务端）
    ClearRedis() {
      //清除所有缓存数据
      Utility.ClearRedis();
    },
    //菜单折叠展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
      //侧边栏折叠样式
      if (this.isCollapse) {
        this.collapsedClass = "menu-collapsed";
      } else {
        this.collapsedClass = "menu-expanded";
      }
    },

    //标签是否激活
    isActive(path) {
      return path === this.$route.path;
    },
    // 关闭单个标签
    closeTags(index) {
      const delItem = this.tagslist[index];
      this.$store.commit("CLOSE_TAG", index);
      const item = this.tagslist[index]
        ? this.tagslist[index]
        : this.tagslist[index - 1];
      if (item) {
        delItem.path === this.$route.path && this.$router.push(item.path);
      } else {
        //所有标签都已关闭
        this.closeAll();
      }
    },
    // 关闭全部标签
    closeAll() {
      this.$store.commit("CLOSE_ALL");
      this.$router.push("/");
    },
    // 关闭其他标签
    closeOther() {
      const curItem = this.tagslist.filter((item) => {
        return item.path === this.$route.path;
      });
      this.$store.commit("CLOSE_OTHER", curItem);
    },
    // 设置标签
    setTags(route) {
      this.$store.commit("SET_TAGSLIST", route);
    },
    // 当关闭所有页面时隐藏
    handleTags(command) {
      command === "other" ? this.closeOther() : this.closeAll();
    },
    // 25分钟检测一次token
    refreshToken() {
      setInterval(() => {
        this.$store.dispatch("RefeshToken").then((res) => {
          console.log("定时刷新token");
        });
      }, 1500000);
    },
  },
  watch: {
    //对router进行监听，每当访问router时，对tags的进行修改
    $route(to) {
      if (to.path.toLowerCase() !== this.fixedTag.path) {
        this.setTags(to);
        const tags = this.$refs.tag;
        this.$nextTick(() => {
          if (tags) {
            for (const tag of tags) {
              if (tag.to.path === this.$route.path) {
                this.$refs.scrollPane.moveToTarget(tag, tags);
                break;
              }
            }
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  font-size: 20px;
  height: 50px !important;
  > div {
    display: flex;
    align-items: center;
    span {
      //margin-left: 15px;
      //margin-left: -15px;
      font-weight: bold;
    }
  }
}
.right-menu{
  .right-menu-item  {
    display: inline-block;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    vertical-align: text-bottom;
  }
  .userinfo-inner {
    cursor: pointer;
    line-height: 60px;
  }
  .user-header {
    cursor: pointer;
    background: white;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    margin-right: 0px;
    top: 2px;
    position: relative;
    /* right: 35px; */
    border: 1px solid #dfdfdf;
    /* float: right; */
  }
  .theme-change{
    cursor: pointer;
    font-size: 18px;
  }
  .message-icon {
    cursor: pointer;
    font-size: 18px;
    line-height: 25px;
  }
}
.toggle-button {
  padding: 0px 23px;
  width: 14px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  float: left;
}
.toggle-button-collapsed{
  padding: 0px 23px;
  width: 14px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  float: left;
  i {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  }
}
.el-aside {
  .el-scrollbar{
    height: calc(100% - 50px);
  }
  .el-menu {
    border-right: 0;
  }
}
.el-main {
  background-color: #eaedf1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
</style>


<style lang="less" scoped>
.tags {
  position: relative;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  margin-bottom: 0;
  background: #f0f0f0;
}

.tags ul {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: none;
}

.tags-li {
  float: left;
  margin: 3px 5px 2px 3px;
  border-radius: 3px;
  font-size: 13px;
  overflow: hidden;
  height: 23px;
  line-height: 23px;
  border: 1px solid #e9eaec;
  background: #fff;
  padding: 3px 5px 4px 12px;
  vertical-align: middle;
  color: #666;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.tags-li-icon {
  cursor: pointer;
}

.tags-li:not(.active):hover {
  background: #f8f8f8;
}

.tags-li-title {
  float: left;
  max-width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 5px;
  color: #666;
  text-decoration: none;
}

.tags-li.active {
  /*color: #fff;*/
  /*border: 1px solid #10B9D3;*/
  /*background-color: #10B9D3;*/
}

.tags-li.active .tags-li-title {
  /*color: #fff;*/
}

.tags-close-box {
  box-sizing: border-box;
  text-align: center;
  z-index: 10;
  float: right;
  margin-right: 1px;
  line-height: 2;
}

.tags-view-container {
  height: 34px;
  width: calc(100% - 60px);
  /*background: #fff;*/
  /*border-bottom: 1px solid #d8dce5;*/
  /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);*/
  float: left;
}

.tags-view-container .tags-view-wrapper .tags-view-item {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: #fff;
  padding: 0 8px;
  font-size: 12px;
  margin-left: 5px;
  margin-top: 4px;
}

.tags-view-container .tags-view-wrapper .tags-view-item:first-of-type {
  margin-left: 5px;
}

.tags-view-container .tags-view-wrapper .tags-view-item:last-of-type {
  margin-right: 15px;
}

.tags-view-container .tags-view-wrapper .tags-view-item.active {
  /*background-color: #42b983;*/
  /*color: #fff;*/
  /*border-color: #42b983;*/
}

.tags-view-container .tags-view-wrapper .tags-view-item.active::before {
  content: "";
  background: #2d8cf0;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  margin-right: 2px;
}

.tags-view-container .contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.tags-view-container .contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.tags-view-container .contextmenu li:hover {
  background: #eee;
}
</style>